<template>
  <div  class="chart_group" :style="`height:${height}`" :id="chartId">
    <div class="chart_title">
      <el-tooltip content="删除" placement="top">
        <a v-show="!isExpand" class="btn-chart"><i class="fa fa-close" @click="deleteChart"></i></a>
      </el-tooltip>
      <el-tooltip content="保存图片" placement="top">
        <a class="btn-chart"  @click=""><i class="fa fa-file-image-o"></i></a>
      </el-tooltip>
      <el-tooltip content="缩放" placement="top">
        <a v-show="!isExpand" class="btn-chart" @click="expand"><i
          class="fa fa-expand"></i></a>
      </el-tooltip>
      <el-tooltip content="缩放" placement="top">
        <a v-show="isExpand" class="btn-chart" @click="compress"><i class="fa fa-compress"></i></a>
      </el-tooltip>
      <el-tooltip content="公式编辑" placement="top">
        <a class="btn-chart" @click=""><i class="fa fa-superscript fa-lg"></i></a>
      </el-tooltip>
      <el-tooltip content="详细数据" placement="top">
        <a class="btn-chart" @click=""><i class="fa fa-bar-chart"></i></a>
      </el-tooltip>
      <el-tooltip content="Y轴配置" placement="top">
        <a class="btn-chart" @click=""><i class="el-icon-setting"></i></a>
      </el-tooltip>
    </div>
    <div class="chart_div" :style="`height:${chartHeight}`" :id="'m_'+chartId"></div>
  </div>
</template>

<script setup lang="ts">
import { ref,defineEmits,onMounted,getCurrentInstance} from "vue";

export interface CoilEchartsType {
  chartId?:string;
  chartIds:string[];
  isShow:boolean;
}
const props = withDefaults(defineProps<CoilEchartsType>(),{
  chartId:"name",
  chartIds:()=>[],
  isShow:false

});

const isExpand = ref<boolean>(false);
const height = ref<string>("30vh");
const chartHeight = ref<string>("25vh");
const emit = defineEmits(['update:isShow'])



//图像变大
const expand = ()=>{
  height.value = "85vh";
  chartHeight.value = "80vh"
  for (let key in props.chartIds) {
    if (props.chartIds[key]!==props.chartId){
      document.getElementById(props.chartIds[key]).style.display = "none";
    }
  }
  isExpand.value = true;

}
//图像缩小
const compress = () => {
  height.value = "30vh";
  chartHeight.value = "25vh"
  for (let key in props.chartIds) {
    document.getElementById(props.chartIds[key]).style.display = "block";
  }
  isExpand.value = false;
}

//删除图表
const deleteChart = (chartId:string) => {
  const idx = props.chartIds.indexOf(chartId);
  props.chartIds.splice(idx,1);
}







</script>

<style scoped>
.chart_group{
  width:100%;
  border:1px solid #1663b4;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.chart_title{
  width:100%;
  height:4vh;
  margin-bottom: 1vh;
  border-bottom: 1px solid #1663b4;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.chart_div{
  width:100%;
}
.btn-chart{
  color: black;
  float: right;
  margin-right: 2vh;
  margin-top: 0.4vh;
  font-size: 2vh;
  cursor: pointer;
}

</style>